import React, { useState } from "react"
import { Link } from 'react-router-dom'
import MonacoEditor from "react-monaco-editor"
import { Card, Breadcrumb, Button } from 'antd'
import { CaretRightFilled } from '@ant-design/icons'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
import './index.scss'


const Publish = () => {
    const [text, setText] = useState("")
    const [activeTabKey, setActiveTabKey] = useState('result')

    const onTabChange = (key) => {
        setActiveTabKey(key)
    }
    function onChangeCodeHandle (value) {
        setText(value)
    }

    const tabListNoTitle = [
        {
            key: 'result',
            tab: '运行结果',
        },
        {
            key: 'appraise',
            tab: '老师评语',
        },
    ]
    const contentListNoTitle = {
        result: <p>article content</p>,
        appraise: <p>app content</p>,
    }

    return (
        <div className="main">
            <Card
                title={
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>
                            <Link to="/student">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>两数之和</Breadcrumb.Item>
                    </Breadcrumb>}
            >
                <div className="content">
                    <div className="left">
                        <div className="description">
                            <p
                            >给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。

                                你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。</p>

                        </div>
                        <div className="appraise">
                            <Card
                                style={{
                                    width: '100%',
                                    height: '210px'
                                }}
                                tabList={tabListNoTitle}
                                activeTabKey={activeTabKey}
                                tabBarExtraContent={<a href="/more">More</a>}
                                onTabChange={(key) => {
                                    onTabChange(key)
                                }}
                            >
                                {contentListNoTitle[activeTabKey]}
                            </Card>

                        </div>
                    </div>
                    <div className="right">
                        <MonacoEditor
                            height="100%"
                            width="100%"
                            language="python"
                            theme="vs-dark"
                            value={text}
                            onChange={onChangeCodeHandle}
                            options={{
                                selectOnLineNumbers: true,
                                matchBrackets: "near",
                            }}
                        />
                    </div>
                </div>
                <span className="bottom">
                    <Button icon={<CaretRightFilled />} style={{ marginRight: '15px' }}>运行</Button>
                    <Button type="primary" >提交</Button>
                </span>
            </Card>
        </div>
    )
}

export default Publish